<template>
  <div :class="!isFullScreen ? 'chart' : 'fullScreen'">
    <ul :class="!isFullScreen ? 'chartHeader' : 'chartHeaderFullScreen'">
      <li
        :class="
          !isFullScreen
            ? 'chartHeaderArea choseArea'
            : 'chartHeaderAreaFullScreen choseArea'
        "
      >
        <!-- <el-select></el-select> -->
        <el-cascader
          size="mini"
          v-model="areaArry"
          :props="{ checkStrictly: true }"
          ref="cascader"
          placeholder="请选取区域"
          :options="cityOptions"
          @change="handleChange"
          filterable
        ></el-cascader>
        <el-select
          v-model="investmentType"
          placeholder="请选择投资类型"
          v-if="active == 1 && !isEsUser()"
        >
          <!--恩施因接受检查不显示-->
          <el-option
            :label="item.name"
            :value="item.id"
            v-for="item in investmentOptions"
            :key="item.id"
          ></el-option>
        </el-select>
      </li>
      <li
        :class="
          !isFullScreen
            ? 'chartHeaderMenu'
            : 'chartHeaderMenu chartHeaderMenuListBox'
        "
      >
        <div
          :class="
            active == 1
              ? isFullScreen
                ? 'chartHeaderMenuList activedImg1'
                : 'chartHeaderMenuList actived'
              : 'chartHeaderMenuList'
          "
          @click="changeActive(1)"
        >
          <i class="icon iconfont icondaping-shujugailan"></i>
          数据概况
        </div>
        <div
          :class="
            active == 2
              ? isFullScreen
                ? 'chartHeaderMenuList activedImg2'
                : 'chartHeaderMenuList actived'
              : 'chartHeaderMenuList'
          "
          @click="changeActive(2)"
          v-if="!isShiYanUser()"
        >
          <i class="icon iconfont icondaping-dongtaijianguan"></i>
          {{ isEnShi ? '信用监管' : '动态监管' }}
        </div>
        <div
          :class="
            active == 3
              ? isFullScreen
                ? 'chartHeaderMenuList activedImg2'
                : 'chartHeaderMenuList actived'
              : 'chartHeaderMenuList'
          "
          @click="changeActive(3)"
        >
          <i class="icon iconfont icondaping-fengxianyujing"></i>
          风险预警
        </div>
      </li>
      <li class="chartHeaderDate">
        数据系统截止于
        <span>{{ time }}</span>
        <span
          @click="isFullScreen = !isFullScreen"
          class="fullScreenIcon actived"
        >
          <i class="icon iconfont icondaping-suoxiao" v-if="isFullScreen"></i>
          <i class="icon iconfont icondaping-quanping" v-else></i>
        </span>
      </li>
      <li v-if="isFullScreen" class="chartHeaderTitle">{{ screenTitle }}</li>
    </ul>
    <dynamic-Supervision
      v-if="active == 2"
      :area="area"
      :isFullScreen="isFullScreen"
    />
    <Riskwarning
      v-if="active == 3"
      :areaId="area"
      :isFullScreen="isFullScreen"
    ></Riskwarning>
    <overView
      v-if="active == 1"
      :area="area"
      :investmentType="investmentType"
      :isFullScreen="isFullScreen"
    ></overView>
  </div>
</template>
<script>
import echarts from 'echarts'
import Riskwarning from '../bigScreen/Riskwarning'
import overView from '../bigScreen/overView'
import DynamicSupervision from '@/components/bigScreen/Dynamic'
import common from '../../kits/common'
import { mapActions, mapState } from 'vuex'
export default {
  name: 'index',
  components: {
    Riskwarning,
    overView,
    DynamicSupervision,
  },
  data() {
    return {
      screenTitle: this.$store.state.areaInfoArr.dataBigTitle
        ? this.$store.state.areaInfoArr.dataBigTitle
        : '农民工工资支付数据大屏',
      isFullScreen: false,
      bussiness: {},
      cityOptions: [],
      active: '',
      area: '',
      countryArea: '',
      investmentType: '',
      investmentTypeOptions: [],
      time: '',
      screenWidth: window.screen.width, // 屏幕宽
      screeHeight: window.screen.height,
      screenTotalCalss: 'bussinessTotal',
      isEnShi: false,
      canChange: true,
    }
  },
  created() {
    this.getTime()
    this.isEnShi = this.isEsUser()
    // if(this.isYS()){
    //     this.area = '2'
    //     this.getCountryData()
    //     this.$store.commit("SET_INFO", ["changeArea", [{areaId:'2',label:'全国'}]]);
    //     this.screenTitle = "全国农民工工资支付监控预警平台";
    // }else if(this.isCCUser()){
    //     const options = require('@/kits/cc')
    //     this.area = '220100'
    //     this.cityOptions = options.options
    //      this.$store.commit("SET_INFO", ["changeArea", [{areaId:'220100',label:'长春市'}]]);
    //      this.screenTitle = "长春市信易工管理平台";
    // }else if(this.isXSBNUser()){
    //     const options = require('@/kits/xsbn')
    //     this.area = '532800'
    //     this.cityOptions = options.options
    //     this.$store.commit("SET_INFO", ["changeArea", [{areaId:'532800',label:'西双版纳傣族自治州'}]]);
    //     this.screenTitle = "西双版纳建设领域用工实名制信息化监管平台";
    // }else if(this.isNmUser()){
    //     const options = require('@/kits/nm')
    //     this.area = '15'
    //     this.cityOptions = options.options
    //     this.$store.commit("SET_INFO", ["changeArea", [{areaId:'15',label:'内蒙古自治区'}]]);
    //     this.screenTitle = "内蒙古农民工工资支付监控预警平台";
    // }else{
    //     this.area = this.$store.state.areaInfoArr.areaId
    //     this.getAreaData();
    // }
    this.area = this.$store.state.areaInfoArr.areaId
    this.getAreaData()
  },
  activated() {
    let str = this.active
    this.active = null
    setTimeout(() => {
      this.active = str
    }, 10)
  },
  activated() {
    let str = this.active
    this.active = null
    setTimeout(() => {
      this.active = str
    }, 10)
  },
  mounted() {
    this.getTypeList()
    if (this.isEsUser()) {
      //   this.screenTitle = "恩施州农民工工资支付数据大屏";
      this.active = 2
    } else {
      this.active = 1
    }
  },
  watch: {
    isFullScreen(val) {
      let currentActive = this.active
      this.active = 0
      setTimeout(() => {
        this.active = currentActive
      }, 50)
    },
    areaArry(val) {
      const areas = val[val.length - 1]
      this.area = areas
    },
  },
  computed: {
    ...mapState(['areasOptions', 'investmentOptions']),
    areaArry() {
      return this.$store.getters.changeArea
    },
  },
  methods: {
    changeActive(index) {
      let that = this
      if (this.canChange) {
        this.active = index
        this.canChange = false
        setTimeout(() => {
          that.canChange = true
        }, 1000)
      }
    },
    getCountryData() {
      let that = this
      this.axios
        .post('/api-bs/areadic/base/areas', { belongs: 2, areaId: 4213 })
        .then((res) => {
          if (!res.data.hasError) {
            let arr = res.data.result
            let countryArr = [
              {
                label: '全国',
                level: 0,
                parentId: '0',
                value: '2',
                children: arr,
              },
            ]
            this.cityOptions = countryArr
            const { label, value } = countryArr[0]
            this.$store.commit('SET_INFO', [
              'changeArea',
              [{ areaId: value, label: label }],
            ])
          }
        })
    },
    getAreaData() {
      let that = this
      this.axios.post('/api-bs/areadic/base/areabyscreen').then((res) => {
        if (!res.data.hasError) {
          //删除乡镇一级数据
          let arr = res.data.result
          // if(this.isEnShi) {
          this.cityOptions = [
            {
              label: '恩施土家族苗族自治州',
              level: 1,
              parentId: '42',
              value: '4228',
            },
          ]
          // }else {
          this.cityOptions = arr
          // }
          const { label, value } = res.data.result[0]
          this.$store.commit('SET_INFO', [
            'changeArea',
            [{ areaId: value, label: label }],
          ])
        }
      })
    },
    deleteChildren(arr) {
      if (arr.children) {
        arr.children.forEach((m) => {
          if (m.value.length == 6) {
            delete m.children
          } else {
            this.deleteChildren(m)
          }
        })
      }
    },
    getTypeList() {
      this.axios({
        method: 'post',
        url: 'api-p/project/expand/findstatusbytype',
        data: { type: 'PROJECT_INVESTMENT' },
      }).then((res) => {
        if (!res.data.hasError) {
          res.data.result.unshift({ code: '', name: '全部' })
          this.investmentTypeOptions = res.data.result
        }
      })
    },
    getTime() {
      var now = new Date()
      var year = now.getFullYear()
      var month = now.getMonth() + 1
      var day = now.getDate() - 1
      var time = year + '-' + common.pad(month) + '-' + common.pad(day)
      this.time = time
    },
    handleChange(val) {
      this.$nextTick(() => {
        let idArr = val
        const areas = val[val.length - 1]
        this.area = areas
        let nameArr = this.$refs['cascader'].presentText.split('/')
        let areaArr = []
        idArr.forEach((item, index) => {
          areaArr.push({ areaId: item, label: nameArr[index] })
        })
        this.$store.commit('SET_INFO', ['changeArea', areaArr])
        this.$refs.cascader.dropDownVisible = false
      })
    },
  },
}
</script>
<style lang="less" scoped>
.containerRouterViewWrap.containerRouterView {
  background-color: #31546b !important;
}
.chart {
  height: calc(100% - 36px) !important;
  left: 0 !important;
  top: 36px !important;
  bottom: 0 !important;
  right: 0 !important;
  padding: 0 10px 10px;
  position: relative;
}
.actived {
  color: #3affd1 !important;
  background-image: linear-gradient(
    180deg,
    rgba(0, 215, 205, 0) 0%,
    rgba(52, 255, 219, 0.4) 100%
  );
}
.activedImg1 {
  color: #3affd1 !important;
  background-image: url('../../assets/list1.png');
  background-size: 100% 100%;
}
.activedImg2 {
  color: #3affd1 !important;
  background-image: url('../../assets/list2.png');
  background-size: 100% 100%;
}
.containerRouterViewWrap.fullScreen {
  background-color: #31546b;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 2000;
  height: calc(100%) !important;
  padding: 0 10px 10px;
}
.chartHeader {
  height: 56px;
  line-height: 56px;
  position: relative;
  &Area {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 2001;
  }
  &Date {
    position: absolute;
    top: 12px;
    right: 3px;
    z-index: 2001;
    font-size: 16px;
    line-height: 32px;
    height: 32px;
    color: #fff;
    span {
      color: #53ffac;
      font-size: 22px;
    }
    .fullScreenIcon {
      width: 32px;
      height: 32px;
      display: inline-block;
      text-align: center;
      cursor: pointer;
    }
  }
  .chartHeaderMenu {
    width: 100%;
    text-align: center;
    &List {
      display: inline-block;
      width: 116px;
      height: 32px;
      line-height: 32px;
      color: #fff;
      font-size: 16px;
      text-align: center;
      cursor: pointer;
    }
  }
}
.chartHeaderAreaFullScreen {
  position: absolute;
  top: 79px;
}
.choseArea {
  z-index: 2005;
  /deep/ .el-cascader,
  /deep/ .el-select {
    height: 28px;
    line-height: 28px;
    .el-input {
      height: 28px;
      line-height: 28px;
      .el-input__inner {
        background-color: #1c405b;
        border-color: transparent;
        color: #fff;
        height: 28px;
        line-height: 28px;
        width: 172px;
        font-size: 12px;
      }
    }
  }
  /deep/.el-input__suffix {
    top: 0 !important;
    height: 28px !important;
    line-height: 28px;
    .el-input__icon {
      height: 28px !important;
      line-height: 28px;
    }
  }
}
.chartHeaderFullScreen {
  height: 116px;
  position: relative;
  .chartHeaderArea {
    position: absolute;
    line-height: 56px;
    top: 35px;
    left: 0;
    height: 32px;
    z-index: 2001;
  }
  .chartHeaderDate {
    position: absolute;
    line-height: 32px;
    top: 35px;
    right: 0;

    height: 32px;
    // z-index: 2001;
    font-size: 16px;
    color: #fff;
    span {
      color: #53ffac;
      font-size: 22px;
    }
    .fullScreenIcon {
      width: 32px;
      height: 32px;
      display: inline-block;
      text-align: center;
    }
  }
  .chartHeaderMenu {
    width: 34%;
    position: absolute;
    line-height: 32px;
    top: 35px;
    left: 0;

    height: 32px;
    z-index: 2001;
    font-size: 16px;
    color: #fff;
    &List {
      cursor: pointer;
      display: inline-block;
      width: 32%;
      height: 32px;
      line-height: 32px;
      color: #fff;
      font-size: 16px;
      text-align: center;
      position: relative;
    }
  }
  .chartHeaderTitle {
    width: 100%;
    text-align: center;
    height: 67px;
    letter-spacing: 0.96px;
    line-height: 58px;
    font-weight: bold;
    font-size: 24px;
    color: #fff;
    background: url('../../assets/screenBg.png') no-repeat;
    background-size: 100% 100%;
  }
}
@media screen and (max-width: 1366px) {
  .chartHeaderTitle {
    font-size: 18px !important;
  }
  .chartHeaderMenuListBox {
    width: 30% !important;
    font-size: 14px !important;
    .chartHeaderMenuList {
      width: 30% !important;
      font-size: 14px !important;
    }
  }
  .chartHeaderDate {
    font-size: 14px !important;
    span {
      color: #53ffac;
      font-size: 18px !important;
    }
  }
  /deep/ .el-input {
    .el-input__inner {
      width: 130px !important;
    }
  }

  .chartHeaderMenu {
    width: 100%;
    text-align: center;
    &List {
      width: 90px !important;
      font-size: 13px !important;
    }
  }
}
@media screen and (max-width: 1070px) {
  .chartHeaderTitle {
    font-size: 18px !important;
  }
  .chartHeaderMenuListBox {
    width: 30% !important;
    font-size: 14px !important;
    .chartHeaderMenuList {
      width: 30% !important;
      font-size: 14px !important;
    }
  }
}
</style>

<style>
/* .el-cascader-menu {
  min-width: 120px;
} */
</style>
